<template>
    <div>
        <div class="header">
            <div class="header-left">
                <a class="logo" href="https://uxlinks-tech.com" title="汇聚物联">汇聚物联</a>
                <UNavigationMenu :items="navigations" />
            </div>
            <span class="header-right">
                <Icon name="ep:phone" />
                <a class="phone" href="phone" title="手机号码">189 2609 3463</a>
            </span>
        </div>
        <div style="min-height: 80vh" class="main">
            <slot></slot>
        </div>
        <div class="footer mt-30">
            <div class="h-22 pt-4 pb-4 footer1 border-b-1 border-white border-solid">
                <div class="w-247 m-auto">
                    <span class="inline-block w-21 text-black rounded-2xl text-center bg-white text-sm">LINKS</span>
                    <br/>
                    <span class="text-xl text-white">友情链接</span>
                </div>
            </div>
            <div class="h-66 pt-6 pb-6 footer2 border-b-2 border-white border-solid">
                <div class="flex w-247 m-auto justify-between">
                    <div class="flex-1 mr-20">
                        <span class="text-xl text-white">网站导航 · MENU</span>
                        <ul class="flex flex-wrap">
                            <li class="w-24 text-gray mt-5">
                                <nuxt-link>首页</nuxt-link>
                            </li>
                            <li class="w-24 text-gray mt-5">
                                <nuxt-link>产品</nuxt-link>
                            </li>
                            <li class="w-24 text-gray mt-5">
                                <nuxt-link>服务</nuxt-link>
                            </li>
                            <li class="w-24 text-gray mt-5">
                                <nuxt-link>方案</nuxt-link>
                            </li>
                            <li class="w-24 text-gray mt-5">
                                <nuxt-link>新闻</nuxt-link>
                            </li>
                            <li class="w-24 text-gray mt-5">
                                <nuxt-link>关于</nuxt-link>
                            </li>
                            <li class="w-24 text-gray mt-5">
                                <nuxt-link>联系</nuxt-link>
                            </li>
                        </ul>
                    </div>
                    <div class="flex-1 shrink-0">
                        <span class="text-xl text-white">联系方式 · CONTACT</span>
                        <div class="text-gray mt-5">客服热线：189-2609-3463</div>
                        <div class="text-gray mt-5">公司地址：广东省深圳市龙华区龙华街道明新工业园B栋4楼</div>
                    </div>
                    <div class="flex-1 shrink flex mt-16 flex-col items-end">
                        <img class="w-28" src="@/assets/images/erweima.png"/>
                        <span class="mt-1 text-sm text-gray">扫一扫，联系我们</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup lang="ts">
import type { UNavigationMenu } from "@nuxt/ui";

const navigations = ref([
    {
        label: '首页',
        to: '/home',
    },
    {
        label: '业务板块',
        to: '/bussiness',
    },
    {
        label: '产品中心',
        to: '/products',
    },
    {
        label: '解决方案',
        to: '/solution',
    },
    {
        label: '服务',
        to: '/service',
    },
    {
        label: '关于我们',
        to: '/aboutUs',
    },
    {
        label: '联系我们',
        to: '/contactUs',
    },
])
</script>
<style scoped>
.header {
    margin: 0 auto;
    max-width: 1200px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.header-left {
    display: flex;
}
.logo{
    display: inline-block;
    margin-right: 40px;
    text-indent: -9999px;
    height: 50px;
    width: 136px;
    background: white url('~/assets/images/logo.png') no-repeat;
    background-size: contain;
}
.phone{
    margin-left: 10px;
}
.footer {
    background-color: #18202B;
}
.footer1 {

}
</style>
